import React, { Component } from "react";
import "antd/dist/antd.css";
import {
  Button,
  Drawer,
  Space,
  Badge,
  Descriptions,
  Table,
  message,
} from "antd";
import { Deliveryrecordlist, Deliveryrecordsend } from "../../../services/auth";

export class GoodsDetail extends Component {
  constructor(props) {
    super(props);
    const { reset } = this.props;
    this.reset = reset;
    this.state = {
      visible: false,
      recordlist: [],
    };
  }

  judgeStatus = (status) => {
    switch (status) {
      case "已完成":
        return "success";
      case "待发送":
        return "error";
      case "待发货":
        return "processing";
      case "待付款":
        return "warning";
      default:
        return "default";
    }
  };

  showDrawer = () => {
    Deliveryrecordlist(this.props.deliverydtl.id).then(
      (response) => {
        console.log(response.data);
        this.setState({ recordlist: response.data });
      },
      (error) => {
        console.log(error);
      }
    );
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const { delivery, deliverydtl } = this.props;
    const columns = [
      { title: "发货工厂ID", dataIndex: "plant_id", align: "center" },
      { title: "工厂名称", dataIndex: "plant_name", align: "center" },
      { title: "发货数量", dataIndex: "quantity", align: "center" },
      { title: "发货日期", dataIndex: "deliv_date", align: "center" },
      { title: "收货日期", dataIndex: "arrive_date", align: "center" },
      {
        title: "",
        key: "action",
        align: "center",
        render: (record) => (
          <Space>
            <Button
              type="link"
              size="small"
              disabled={record.deliv_date !== undefined}
              onClick={() => {
                Deliveryrecordsend(record.id).then(
                  (response) => {
                    if (response.data === "success") {
                      message.success("发货成功");
                      this.reset();
                      this.onClose();
                    } else {
                      message.info("发货失败，请重试");
                    }
                  },
                  (error) => {
                    console.log(error);
                  }
                );
              }}
            >
              发货
            </Button>
          </Space>
        ),
      },
    ];
    return (
      <div>
        <Button type="link" onClick={this.showDrawer}>
          详情
        </Button>
        <Drawer
          title="发货详情"
          width={720}
          onClose={this.onClose}
          visible={this.state.visible}
          bodyStyle={{ paddingBottom: 80 }}
        >
          <Descriptions column={2}>
            <Descriptions.Item label="产品名称">
              {deliverydtl.goods_name}
            </Descriptions.Item>
            <Descriptions.Item label="产品编号">
              {deliverydtl.goods_id}
            </Descriptions.Item>
            <Descriptions.Item label="数量">
              {deliverydtl.quantity}
            </Descriptions.Item>
            <Descriptions.Item label="订单创建">
              {delivery.docum_date}
            </Descriptions.Item>
            <Descriptions.Item label="要求送达">
              {delivery.req_deliv_date}
            </Descriptions.Item>
            <Descriptions.Item label="状态" span={3}>
              <Badge
                status={this.judgeStatus(deliverydtl.status)}
                text={deliverydtl.status}
              />
            </Descriptions.Item>
            <Descriptions.Item span={3}>
              <Table
                columns={columns}
                dataSource={this.state.recordlist}
                rowKey={this.state.recordlist.id}
              ></Table>
            </Descriptions.Item>
          </Descriptions>
        </Drawer>
      </div>
    );
  }
}

export default GoodsDetail;
